<template>
  <div class="focusList">
    <div class="tit">
      <div class="mytravel">
        <span :class="{'active':active1}" @click="focusShop">店铺关注</span>
        <div v-show="active1" class="bor"></div>
      </div>
      <div class="shopHis">
        <span :class="{'active':active2}" @click="collect">收藏</span>
        <div v-show="active2" class="bor"></div>
      </div>
      <div class="shopHis">
        <span :class="{'active':active3}" @click="history">足迹</span>
        <div v-show="active3" class="bor"></div>
      </div>
      <span class="right">排序</span>
    </div>
    
    <router-view></router-view>
  </div>
</template>

<script>
export default {

  data () {
    return {
      active1:true,
      active2:false,
      active3:false
    }
  },

  methods: {
    focusShop(){
      this.active1=true
      this.active2=false
      this.active3=false
      this.$router.push({name:'focusList'})
    },
    collect(){
      this.active1=false
      this.active2=true
      this.active3=false
      this.$router.push({name:'focusProList',params:{id:1}})
    },
    history(){
      this.active1=false
      this.active2=false
      this.active3=true
      this.$router.push({name:'focusProList',params:{id:2}})
    }
  },

  created () {
  }
}
</script>

<style scoped lang='less'>
.focusList{
  .active{
    width:82px;
    text-align: center;
    display: block;
  }
  .bor{
    background: #FDDF00;
    border: 1px solid #3B3B3B;
     border-radius: 100px;
     width:16px;
     height:8px;
     margin-top: 3px;
     margin-left: 37px;
  }
}

</style>
